<template>
  <div class="page">
    <el-row>
      <el-button @click="test">默认按钮</el-button>
      <el-button type="primary" @click="test2">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
<div class="line"> </div>
    <div>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Jion',
  components: { },
  data () {
    return {
      currentPage: 1,
      testdata: {}
    }
  },
  create () {
    this.testapi()
  },
  methods: {
    test () {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    test2 () {
      this.$message('这是一条消息提示')
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    // 测试发送请求
    testapi () {
      axios.get('').then(() => {
        if (code === 0) {
          this.testdata = res.data
        }
      })
    }
  }
}
</script>

<style scoped>
.page{
  padding: 50px 100px;
}
.line{
  height: 20px;
  background-color: #f3f4f5;
  margin: 10px 0;
}
.div {
  width: 300px;
  height: 300px;
}
</style>
